<cly-dropdown
    v-tooltip="label"
    ref="dropdown"
    @hide="handleDropdownHide"
    @show="handleDropdownShow"
    :placement="placement"
    :pop-class="popClass"
    :placeholder="placeholder"
    :disabled="disabled">
    <template v-slot:trigger="dropdown">
        <slot name="trigger">
            <cly-input-dropdown-trigger
                ref="trigger"
                :adaptive-length="true"
                :min-width="minInputWidth"
                :max-width="maxInputWidth"
                :arrow="true"
                :prefix-icon="'cly-icon-date cly-icon-prefix-icon'"
                :disabled="disabled"
                :selected-options="label"
                :focused="dropdown.focused"
                :opened="dropdown.visible"
                :size="size"
                :placeholder="placeholder">
            </cly-input-dropdown-trigger>
        </slot>
    </template>
    <div class="cly-vue-daterp">
        <div class="cly-vue-daterp__shortcuts-col" v-if="shortcuts && shortcuts.length > 0">
            <div v-if="allowCustomRange && !moveRangeTabsToLeftSide" class="text-medium font-weight-bold cly-vue-daterp__shortcut cly-vue-daterp__shortcut--custom"
            :class="{'cly-vue-daterp__shortcut--active': customRangeSelection,  'cly-vue-daterp__shortcut--deactive': !customRangeSelection}"
            @click="handleCustomRangeClick">
            {{i18n('common.time-period-select.custom-range')}}<i class="el-icon-caret-right"></i>
            </div>
            <div class="text-medium font-weight-bold cly-vue-daterp__shortcut"
                :class="{'cly-vue-daterp__shortcut--active': selectedShortcut == shortcut.value, 'cly-vue-daterp__shortcut--deactive': customRangeSelection && !moveRangeTabsToLeftSide}"
                v-for="shortcut in shortcuts"
                @click="handleShortcutClick(shortcut.value)">
                {{shortcut.label}}
            </div>
        </div>
        <div class="cly-vue-daterp__calendars-col" v-if="(isVisible && customRangeSelection)">
            <div class="cly-vue-daterp__input-methods" :class="{'cly-vue-daterp__hidden-tabs': !showRelativeModes || !isRange}">
                <el-tabs v-model="rangeMode" @tab-click="handleTabChange" v-if="!moveRangeTabsToLeftSide">
                    <el-tab-pane name="inBetween">
                        <template slot="label">
                            <span class="text-medium font-weight-bold">{{i18n('common.time-period-select.range')}}</span>
                        </template>
                        <div class="cly-vue-daterp__input-wrapper">
                            <template v-if="isRange && !displayOneMode">
                                <el-input size="small" :disabled="inputDisable" :class="{'is-active': isStartFocused, 'is-error': inBetweenInput.raw.invalid0}" @focus="handleTextStartFocus" @blur="handleTextStartBlur" v-model="inBetweenInput.raw.textStart"></el-input>
                                <span class="text-medium cly-vue-daterp__in-between-conj">{{i18n('common.and')}}</span>
                                <el-input size="small" :disabled="inputDisable" :class="{'is-active': isEndFocused, 'is-error': inBetweenInput.raw.invalid1}" @focus="handleTextEndFocus" @blur="handleTextEndBlur" v-model="inBetweenInput.raw.textEnd"></el-input>
                            </template>
                            <template v-else>
                                <div class="bu-is-flex bu-is-justify-content-space-between bu-is-align-items-baseline" style="width:100%">
                                    <div>
                                        <span class="text-medium">{{i18n('common.' + type)}}</span>
                                    </div>
                                    <div>
                                        <el-input size="small" :class="{'is-active': isStartFocused, 'is-error': inBetweenInput.raw.invalid0}" @focus="handleTextStartFocus" @blur="handleTextStartBlur" v-model="inBetweenInput.raw.textStart"></el-input>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane name="before" v-if="allowBeforeSelection">
                        <template slot="label">
                            <span class="text-medium font-weight-bold">{{i18n('common.time-period-select.before')}}</span>
                        </template>
                        <div class="cly-vue-daterp__input-wrapper">
                            <el-input size="small" :disabled="inputDisable" :class="{'is-error': beforeInput.raw.invalid0}" v-model="beforeInput.raw.text"></el-input>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane name="since">
                        <template slot="label">
                            <span class="text-medium font-weight-bold">{{i18n('common.time-period-select.since')}}</span>
                        </template>
                        <div class="cly-vue-daterp__input-wrapper">
                            <el-input size="small" :disabled="inputDisable" :class="{'is-error': sinceInput.raw.invalid0}" v-model="sinceInput.raw.text" @blur="handleSinceBlur"></el-input>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane name="inTheLast">
                        <template slot="label">
                            <span class="text-medium font-weight-bold">{{i18n('common.time-period-select.last-n')}}</span>
                        </template>
                        <div v-if="!retentionConfiguration" class="cly-vue-daterp__input-wrapper">
                            <el-input size="small" v-model.number="inTheLastInput.raw.text"></el-input>
                            <el-select size="small" v-model="inTheLastInput.raw.level">
                                <el-option :label="i18n('common.buckets.days')" value="days"></el-option>
                                <el-option :label="i18n('common.buckets.weeks')" value="weeks"></el-option>
                                <el-option :label="i18n('common.buckets.months')" value="months"></el-option>
                                <el-option :label="i18n('common.buckets.years')" value="years"></el-option>
                            </el-select>
                        </div>
                        <div v-else class="cly-vue-daterp__input-wrapper bu-is-justify-content-flex-end">
                            <el-input size="small" style="width: 100px;" v-model.number="inTheLastInput.raw.text"></el-input>
                            <span class="text-medium bu-ml-2">{{retentionConfiguration}}</span>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane name="onm" v-if="allowOnSelection">
                        <template slot="label"><span class="text-medium font-weight-bold">{{i18n('common.time-period-select.on')}}</span></template>
                        <div class="cly-vue-daterp__input-wrapper">
                            <el-input size="small" :class="{'is-error': onmInput.raw.invalid0}" v-model="onmInput.raw.text" @blur="handleOnmBlur"></el-input>
                        </div>
                    </el-tab-pane>
                </el-tabs>
                <div v-if="moveRangeTabsToLeftSide" class="cly-vue-daterp__input-wrapper">
                    <div v-if="rangeMode === 'inBetween'" class="cly-vue-daterp__input-wrapper-content">
                        <el-input size="small" :disabled="inputDisable" :class="{'is-active': isStartFocused, 'is-error': inBetweenInput.raw.invalid0}" @focus="handleTextStartFocus" @blur="handleTextStartBlur" v-model="inBetweenInput.raw.textStart"></el-input>
                        <span class="text-medium cly-vue-daterp__in-between-conj">{{i18n('common.and')}}</span>
                        <el-input size="small" :disabled="inputDisable" :class="{'is-active': isEndFocused, 'is-error': inBetweenInput.raw.invalid1}" @focus="handleTextEndFocus" @blur="handleTextEndBlur" v-model="inBetweenInput.raw.textEnd"></el-input>
                    </div>
                    <el-input v-if="rangeMode === 'before'" size="small" :disabled="inputDisable" :class="{'is-error': beforeInput.raw.invalid0}" v-model="beforeInput.raw.text"></el-input>
                    <el-input v-if="rangeMode === 'since'" size="small" :disabled="inputDisable" :class="{'is-error': sinceInput.raw.invalid0}" v-model="sinceInput.raw.text" @blur="handleSinceBlur"></el-input>
                    <div v-if="rangeMode === 'inTheLast'" class="cly-vue-daterp__input-wrapper-content">
                        <el-input size="small" v-model.number="inTheLastInput.raw.text"></el-input>
                        <el-select size="small" v-model="inTheLastInput.raw.level">
                            <el-option :label="i18n('common.buckets.days')" value="days"></el-option>
                            <el-option :label="i18n('common.buckets.weeks')" value="weeks"></el-option>
                            <el-option :label="i18n('common.buckets.months')" value="months"></el-option>
                            <el-option :label="i18n('common.buckets.years')" value="years"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="cly-vue-daterp__day-names-wrapper" v-if="tableType === 'day' || tableType === 'week'">
                    <table class="cly-vue-daterp__day-names">
                        <tr>
                            <th v-for="dayName in weekdays">{{ dayName }}</th>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="cly-vue-daterp__calendars-wrapper">
                <div class="cly-vue-daterp__table-wrap" :class="{'is-point': !isRange, 'is-start-focused': isStartFocused, 'is-end-focused': isEndFocused}" style="height: 238px" ref="calendarsViewport">
                    <vue-scroll ref="vs" :ops="scrollOps">
                        <div class="cly-vue-daterp__table-view" v-if="tableType === 'year'">
                            <year-table
                                v-for="item in globalRange"
                                :key="item.key"
                                :date-meta="item"
                                :in-viewport-requires-root="true"
                                :in-viewport-root="$refs.calendarsViewport"
                                selection-mode="years"
                                :date="item.date"
                                :disabled-date="disabledDateFn"
                                :min-date="minDate"
                                :max-date="maxDate"
                                @pick="handleYearPick">
                            </year-table>
                        </div>
                        <div class="cly-vue-daterp__table-view" v-else-if="tableType === 'month'">
                            <month-table
                                v-for="item in globalRange"
                                :key="item.key"
                                :date-meta="item"
                                :in-viewport-requires-root="true"
                                :in-viewport-root="$refs.calendarsViewport"
                                selection-mode="range"
                                :date="item.date"
                                :min-date="minDate"
                                :max-date="maxDate"
                                :disabled-date="disabledDateFn"
                                :rangeState="rangeState"
                                @pick="handleRangePick"
                                @changerange="handleChangeRange">
                            </month-table>
                        </div>
                        <div class="cly-vue-daterp__table-view" v-else>
                            <date-table
                                v-for="item in globalRange"
                                :key="item.key"
                                :date-meta="item"
                                :in-viewport-requires-root="true"
                                :in-viewport-root="$refs.calendarsViewport"
                                selection-mode="range"
                                :date="item.date"
                                :min-date="minDate"
                                :first-day-of-week="1"
                                :max-date="maxDate"
                                :disabled-date="disabledDateFn"
                                :rangeState="rangeState"
                                @pick="handleRangePick"
                                @changerange="handleChangeRange">
                            </date-table>
                        </div>
                    </vue-scroll>
                </div>
            </div>
            <div v-if="isTimePickerEnabled" class="cly-vue-daterp__time-picker-section">
                <div class="bu-is-flex bu-is-justify-content-space-between bu-is-align-items-baseline" style="width:100%">
                    <div>
                        <span class="text-medium">{{i18n('common.time')}}</span>
                    </div>
                    <div>
                        <cly-time-picker align="right" :width="100" v-model="minTime"></cly-time-picker>
                    </div>
                </div>
            </div>
            <div v-if="warnings" class="bu-mt-4 bu-mx-4" style="text-align: right;">
                <span class="text-medium" v-for="warning in warnings">{{warning}}</span>
            </div>
            <div class="cly-vue-daterp__commit-section">
                <el-button @click="handleDiscardClick" class="cly-vue-daterp__cancel-button color-cool-gray-100 bg-warm-gray-20" size="small">{{ i18n("common.cancel") }}</el-button>
                <el-button @click="handleConfirmClick" v-tooltip="commitTooltip" class="cly-vue-daterp__confirm-button" type="success" size="small">{{ !isRange ? i18n("common.apply") : i18n("common.apply-range") }}</el-button>
            </div>
        </div>
    </div>
</cly-dropdown>